<template>
  <div class="nav-bar">
    <div class="nav-bar-fixed">
      <div class="head-box" @click="handleSearch">
        <span class="name">好获商城</span>
        <span class="hot-text">山河无恙，人间皆安</span>
      </div>
      <i class="iconfont icon-message message-icon"></i>
    </div>
  </div>

  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item class="van-swipe-item">1</van-swipe-item>
    <van-swipe-item class="van-swipe-item">2</van-swipe-item>
    <van-swipe-item class="van-swipe-item">3</van-swipe-item>
    <van-swipe-item class="van-swipe-item">4</van-swipe-item>
  </van-swipe>

  <div class="nav">
    <div class="nav-item-box" v-for="(item,index) in navList" :key="index">
      <i :class="`item-icon iconfont ${item.icon}`"></i>
      <span :class="`item-name iconfont`">{{ item.name }}</span>
    </div>
  </div>

  <!-- 新品上线 -->
  <span class="activity-title">新品上线</span>
  <div class="activity-content">
    <div class="goods-box" v-for="item in 5" :style="item%2 ? 'border-right: 1px solid #ddd;' : ''" @click="handleCheckGoods">
      <img src="../assets/logo.png" alt="" class="goods-cover">
      <span class="goods-name">HUAWEI Meta40 Pro + 5G 全网通 125G</span>
      <span class="goods-price">¥ 7988</span>
    </div>
  </div>

  <!-- 热门商品 -->
  <span class="activity-title">热门商品</span>
  <div class="activity-content">
    <div class="goods-box" v-for="item in 5" :style="item%2 ? 'border-right: 1px solid #ddd;' : ''" @click="handleCheckGoods">
      <img src="../assets/logo.png" alt="" class="goods-cover">
      <span class="goods-name">HUAWEI Meta40 Pro + 5G 全网通 125G</span>
      <span class="goods-price">¥ 7988</span>
    </div>
  </div>

  <!-- 最新推荐 -->
  <span class="activity-title">最新推荐</span>
  <div class="activity-content" style="margin-bottom: 1rem;">
    <div class="goods-box" v-for="item in 5" :style="item%2 ? 'border-right: 1px solid #ddd;' : ''" @click="handleCheckGoods">
      <img src="../assets/logo.png" alt="" class="goods-cover">
      <span class="goods-name">HUAWEI Meta40 Pro + 5G 全网通 125G</span>
      <span class="goods-price">¥ 7988</span>
    </div>
  </div>

</template>

<script lang="ts">
interface navInterface{
  name: string,
  icon: string
}
import {defineComponent} from 'vue';
import router from '../config/router'
export default defineComponent({
  setup(){
    const navList:Array<navInterface> = [
      {name: '好获超市',icon: 'icon-chaoshi'},
      {name: '好获服饰',icon: 'icon-yifu'},
      {name: '全球购',icon: 'icon-diqiu'},
      {name: '好获生鲜',icon: 'icon-shengxian-haixian'},
      {name: '好获到家',icon: 'icon-kuaidi'},
      {name: '充值缴费',icon: 'icon-jiaofeishezhi'},
      {name: '拼团购',icon: 'icon-pintuangou'},
      {name: '领卷',icon: 'icon-icon-lingjuanzhongxin'},
      {name: '省钱',icon: 'icon-shengqian'},
      {name: '更多',icon: 'icon-gengduo'},
    ]

    const handleSearch = () => {
        router.push({
          path: '/search'
        })
    }

    const handleCheckGoods = () => {
        router.push({
          path: '/goods-detail',
          query: {
            code: '11111'
          }
        })
    }

    return {
      navList,
      handleSearch,
      handleCheckGoods
    }
  }
})
</script>

<style lang="less" scoped>
.nav-bar {
  height: 1.375rem;

  .nav-bar-fixed {
    display: flex;
    align-items: center;
    position: fixed;
    padding: .25rem .5rem;
    top: 0;
    left: 0;
    right: 0;
    height: 1.375rem;
    background-color: @base-color;
    z-index: 1;

    .head-box {
      display: flex;
      align-items: center;
      padding: 0 .375rem;
      flex: 1;
      background-color: #fff;
      border-radius: .625rem;
      height: 100%;
    }
    
    .name {
      font-size: .5rem;
      font-weight: 600;
      color: @base-color;
      border-right: 1px solid #000;
      line-height: .5rem;
      padding-right: .375rem;
    }

    .hot-text {
      flex: 1;
      padding-left: .375rem;
      font-size: .3125rem;
      color: #777;
    }

    .message-icon {
      margin-left: .375rem;
      color: #fff;
      font-size: .625rem;
    }
  }
  
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background-color: #fff;
  padding-bottom: .375rem;

  .nav-item-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 2rem;
    margin-top: .375rem;
  }

  .item-icon {
    color: @base-color;
    font-size: .75rem;
  }

  .item-name {
    font-size: .3125rem;
    margin-top: .25rem;
  }
}

.activity-title {
  display: block;
  width: 100%;
  text-align: center;
  color: @base-color;
  font-size: .4375rem;
  padding: .25rem;
}

.activity-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  
  .goods-box {
    width: 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding: 0 .375rem .375rem;
    background-color: #fff;
  }

  .goods-cover {
    width: 2.75rem;
    height: 2.75rem;
    margin: .25rem 0;
  }

  .goods-name {
    text-align: center;
    font-size: .34375rem;
    .text-overflow;
  }

  .goods-price {
    color: @base-color;
    font-size: .4375rem;
    line-height: .625rem;
  }
}
</style>